<<<<<<< HEAD
<template>
  <!-- supervisor --inspect xx.js -->
  <header>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
      <el-breadcrumb-item>管理商品</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex">
      <div class="icon" v-if="showClearButton" @click="headEmpty">清空</div>
      <div class="icon" @click="handleSelectClose">筛选</div>
    </div>
  </header>

  <div class="select" ref="select">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商品名字">
            <el-input v-model="formInline.name" placeholder="商品名字" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分类">
            <el-select v-model="formInline.category" placeholder="请选择商品分类">
              <el-option v-for="category in categories" :key="category" :label="category" :value="category"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类别">
            <el-input v-model="formInline.coos" placeholder="商品类别" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="品牌">
            <el-input v-model="formInline.brand" placeholder="品牌" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格">
            <el-input v-model="formInline.price" placeholder="价格" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品地址">
            <el-input v-model="formInline.site" placeholder="商品地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="formSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="main">
    <div class="table-container">
      <table border="1">
        <thead>
          <tr>
            <th>商品名称</th>
            <th>商品类别</th>
            <th>品牌</th>
            <th>价格</th>
            <th>添加时间</th>
            <th style="text-align: center">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="post in shop" :key="post._id" @click="dialogTable(post._id)">
            <td>{{ post.name }}</td>
            <td>{{ post.coos }}</td>
            <td>{{ post.brand }}</td>
            <td>{{ post.price }}</td>
            <td>{{ post.time }}</td>
            <td class="btntd">
              <div class="btn">
                <button class="one iconfont icon-xiugai" @click="modify(post._id)"></button>
                <button class="del iconfont icon-shanchu" @click="del(post._id)"></button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- 分页 -->
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
      :page-size="8" v-model="current" />
  </div>

  <!-- 详情 -->
  <el-dialog v-model="dialogTableVisible" title="商品详情">
    <ShopXiangqing :filterPet="filterPet"></ShopXiangqing>
  </el-dialog>

  <!-- 修改 -->
  <el-drawer v-model="drawer2" title="修改商品" :direction="direction" size="50%" :before-close="handleClose2">
    <ShopXiugai @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet._id"></ShopXiugai>
  </el-drawer>
</template>

<script setup>
import { ref, nextTick, watch, useTemplateRef } from "vue";
import { gitshop, delshop, selectshop } from "@/utils/zqb-axios";
import ShopXiangqing from "@/components/shop/ShopXiangqing.vue";
import ShopXiugai from "@/components/shop/ShopXiugai.vue";
import { ElNotification } from "element-plus";

// 定义相关变量和方法
const categories = ["狗类", "猫类", "小宠"];
const showClearButton = ref(false);
const dialogTableVisible = ref(false);
const filterPet = ref(false);
const shop = ref(null);
const drawer2 = ref(false); // 用于控制修改商品抽屉的显示
const direction = ref("rtl"); // 控制抽屉的方向
const total = ref(0); // 用于分页
const current = ref(1); // 当前页数
const formInline = ref({
  name: "",
  category: "",
  brand: "",
  price: "",
  site: "",
  coos: "",
});
const select = useTemplateRef("select");
const flag = ref(false);

// 方法
const dialogTable = (id) => {
  dialogTableVisible.value = true;
  filterPet.value = shop.value.find((item) => item._id == id);
};

const handleDrawer = () => {
  drawer2.value = false;
  nextTick(() => {
    gitshop(current.value).then((res) => {
      shop.value = res.data.list;
      total.value = res.data.total;
    });
  });
};
import { ElMessageBox } from "element-plus";
const handleClose2 = (done) => {
  ElMessageBox.confirm("帖子还未修改，是否退出?").then(() => {
    done();
  });
};

const updatePet = (id) => {
  drawer2.value = true;
  filterPet.value = shop.value.find((item) => item._id == id);
};

const deletePet = async (id) => {
  await delshop(id);
  gitshop().then((res) => {
    shop.value = res.data.list;
    total.value = res.data.total;
    ElNotification({
      title: "删除成功",
      message: `成功删除一条数据`,
      type: "success",
    });
  });
};

const handleCurrentChange = (newPage) => {
  current.value = newPage;
  formSubmit(newPage); // 调用查询方法并传递新的页码
};

const formSubmit = (page) => {
  const { name, category, brand, price, site, coos } = formInline.value;
  selectshop(name, category, brand, price, site, coos, page).then((res) => {
    // 更新商品列表
    shop.value = res.data.list;
    // 更新总条数
    total.value = res.data.total;
    // 重新触发分页
    current.value = 1; // 设置为第一页，或者保持当前页码
    ElNotification({
      title: "查询成功",
      message: `查询到 ${shop.value.length} 条数据`,
      type: "success",
    });
  });
};

const handleSelectClose = () => {
  flag.value = !flag.value;
  showClearButton.value = flag.value;
  if (flag.value) {
    select.value.style.height = "140rem";
    select.value.style.visibility = "inherit";
    select.value.style.opacity = "1";
  } else {
    select.value.style.height = "0";
    select.value.style.visibility = "hidden";
    select.value.style.opacity = "0";
  }
};

const headEmpty = () => {
  formInline.value = {
    name: "",
    category: "",
    brand: "",
    price: "",
    site: "",
    coos: "",
  };
};

gitshop().then((res) => {
  shop.value = res.data.list;
  total.value = res.data.total;
});
</script>

<style lang="less" scoped>
header {
  padding: 10rem 30rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    padding: 5rem 10rem;
    background-color: #409eff;
    color: #fff;
    border-radius: 4rem;
    margin-left: 8rem;
    font-size: 12rem;
  }
}

.select {
  height: 0;
  visibility: hidden;
  opacity: 0;
  margin: 8rem 20rem;
  padding: 0 20rem;
  background-color: #fff;
  border-radius: 10rem;
  transition: all 1s;
}

.main {
  z-index: 99;
 @theme-color: #f8f9fa;

  .table-container {
    margin: 20rem;
    font-family: "Arial", sans-serif;
  }

  h2 {
    color: @theme-color;
    font-size: 24rem;
    margin-bottom: 18rem;
    display: flex;
    justify-content: space-between;

    .add {
      font-size: 20rem;

      button {
        padding: 6rem 12rem;
        border: none;
        cursor: pointer;
        border-radius: 4rem;
        font-size: 18rem;
        transition: background-color 0.3s;
        background-color: #409eff;
        color: white;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10rem;
    background-color: #fff;
    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.05);
    border-radius: 8rem;
    overflow: hidden;
  }

  th,
  td {
    padding: 6rem 15rem;
    font-size: 14rem;
    text-align: left;
    border: 1rem solid #e0e0e0;
  }

  .btntd {
    padding: 6rem 0;
  }

  th {
    background-color: @theme-color;
    color: #9c9c9c;
    font-weight: 600;
    font-size: 14rem;
  }

  tbody tr:nth-child(even) {
    background-color: #f7f7f7;
  }

  tbody tr:hover {
    background-color: #f1f1f1;
  }

  tbody {
    .btn {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;

      .del {
        background-color: #ff4d4f;
        color: white;
      }

      .one {
        // background-color: #16ceaf;
        color: rgb(0, 0, 0);
      }
    }
  }

  button {
    padding: 6rem 10rem;
    border: none;
    cursor: pointer;
    border-radius: 4rem;
    font-size: 12rem;
    transition: background-color 0.3s;
  }

  .edit-btn {
    background-color: @theme-color;
    color: #fff;
    margin-right: 8rem;

    &:hover {
      background-color: darken(@theme-color, 10%);
    }
  }

  .delete-btn {
    background-color: #ff4d4f;
    color: #fff;

    &:hover {
      background-color: darken(#ff4d4f, 10%);
    }
  }
}

.pagination {
  width: 96%;
  display: flex;
  padding: 0 20rem;
  justify-content: end;
}

.el-form--inline .el-form-item {
  width: 100%;
}

.el-button,
.el-button.is-round {
  margin: auto;
  padding: 0 26rem;
}

.el-form {
  padding-top: 15rem;
}

@import url(../../css/icon.css);
</style>
=======
<template>
  <!-- supervisor --inspect xx.js -->
  <header>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
      <el-breadcrumb-item>管理商品</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex">
      <div class="icon" v-if="showClearButton" @click="headEmpty">清空</div>
      <div class="icon" @click="handleSelectClose">筛选</div>
    </div>
  </header>

  <div class="select" ref="select">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商品名字">
            <el-input v-model="formInline.name" placeholder="商品名字" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品分类">
            <el-select v-model="formInline.category" placeholder="请选择商品分类">
              <el-option v-for="category in categories" :key="category" :label="category" :value="category"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品类别">
            <el-input v-model="formInline.coos" placeholder="商品类别" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="8">
          <el-form-item label="品牌">
            <el-input v-model="formInline.brand" placeholder="品牌" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格">
            <el-input v-model="formInline.price" placeholder="价格" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品地址">
            <el-input v-model="formInline.site" placeholder="商品地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="formSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="main">
    <div class="table-container">
      <table border="1">
        <thead>
          <tr>
            <th>商品名称</th>
            <th>商品类别</th>
            <th>品牌</th>
            <th>价格</th>
            <th>添加时间</th>
            <th style="text-align: center">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="post in shop" :key="post._id">
            <td  @click="dialogTable(post._id)">{{ post.name }}</td>
            <td  @click="dialogTable(post._id)">{{ post.coos }}</td>
            <td  @click="dialogTable(post._id)">{{ post.brand }}</td>
            <td  @click="dialogTable(post._id)">{{ post.price }}</td>
            <td  @click="dialogTable(post._id)">{{ post.time }}</td>
            <td class="btntd">
              <div class="btn">
                <button class="one iconfont icon-xiugai" @click="updatePet(post._id)"></button>
                <button class="del iconfont icon-shanchu" @click="deletePet(post._id)"></button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- 分页 -->
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
      :page-size="8" v-model="current" />
  </div>

  <!-- 详情 -->
  <el-dialog v-model="dialogTableVisible" title="商品详情">
    <ShopXiangqing :filterPet="filterPet"></ShopXiangqing>
  </el-dialog>

  <!-- 修改 -->
  <el-drawer v-model="drawer2" title="修改商品" :direction="direction" size="50%" :before-close="handleClose2">
    <ShopXiugai @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet._id"></ShopXiugai>
  </el-drawer>
</template>

<script setup>
import { ref, nextTick, watch, useTemplateRef } from "vue";
import { gitshop, delshop, selectshop } from "@/utils/zqb-axios";
import ShopXiangqing from "@/components/shop/ShopXiangqing.vue";
import ShopXiugai from "@/components/shop/ShopXiugai.vue";
import { ElNotification } from "element-plus";

// 定义相关变量和方法
const categories = ["狗类", "猫类", "小宠"];
const showClearButton = ref(false);
const dialogTableVisible = ref(false);
const filterPet = ref(false);
const shop = ref(null);
const drawer2 = ref(false); // 用于控制修改商品抽屉的显示
const direction = ref("rtl"); // 控制抽屉的方向
const total = ref(0); // 用于分页
const current = ref(1); // 当前页数
const formInline = ref({
  name: "",
  category: "",
  brand: "",
  price: "",
  site: "",
  coos: "",
});
const select = useTemplateRef("select");
const flag = ref(false);

// 方法
const dialogTable = (id) => {
  dialogTableVisible.value = true;
  filterPet.value = shop.value.find((item) => item._id == id);
};

const handleDrawer = () => {
  drawer2.value = false;
  nextTick(() => {
    gitshop(current.value).then((res) => {
      shop.value = res.data.list;
      total.value = res.data.total;
    });
  });
};
import { ElMessageBox } from "element-plus";
const handleClose2 = (done) => {
  ElMessageBox.confirm("帖子还未修改，是否退出?").then(() => {
    done();
  });
};

const updatePet = (id) => {
  drawer2.value = true;
  filterPet.value = shop.value.find((item) => item._id == id);
};

const deletePet = async (id) => {
  await delshop(id);
  gitshop().then((res) => {
    shop.value = res.data.list;
    total.value = res.data.total;
    ElNotification({
      title: "删除成功",
      message: `成功删除一条数据`,
      type: "success",
    });
  });
};

const handleCurrentChange = (newPage) => {
  current.value = newPage;
  formSubmit(newPage); // 调用查询方法并传递新的页码
};

const formSubmit = (page) => {
  const { name, category, brand, price, site, coos } = formInline.value;
  selectshop(name, category, brand, price, site, coos, page).then((res) => {
    // 更新商品列表
    shop.value = res.data.list;
    // 更新总条数
    total.value = res.data.total;
    // 重新触发分页
    current.value = 1; // 设置为第一页，或者保持当前页码
    ElNotification({
      title: "查询成功",
      message: `查询到 ${shop.value.length} 条数据`,
      type: "success",
    });
  });
};

const handleSelectClose = () => {
  flag.value = !flag.value;
  showClearButton.value = flag.value;
  if (flag.value) {
    select.value.style.height = "140rem";
    select.value.style.visibility = "inherit";
    select.value.style.opacity = "1";
  } else {
    select.value.style.height = "0";
    select.value.style.visibility = "hidden";
    select.value.style.opacity = "0";
  }
};

const headEmpty = () => {
  formInline.value = {
    name: "",
    category: "",
    brand: "",
    price: "",
    site: "",
    coos: "",
  };
};

gitshop().then((res) => {
  shop.value = res.data.list;
  total.value = res.data.total;
});
</script>

<style lang="less" scoped>
header {
  padding: 10rem 30rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    padding: 5rem 10rem;
    background-color: #409eff;
    color: #fff;
    border-radius: 4rem;
    margin-left: 8rem;
    font-size: 12rem;
  }
}

.select {
  height: 0;
  visibility: hidden;
  opacity: 0;
  margin: 8rem 20rem;
  padding: 0 20rem;
  background-color: #fff;
  border-radius: 10rem;
  transition: all 1s;
}

.main {
  z-index: 99;
 @theme-color: #f8f9fa;

  .table-container {
    margin: 20rem;
    font-family: "Arial", sans-serif;
  }

  h2 {
    color: @theme-color;
    font-size: 24rem;
    margin-bottom: 18rem;
    display: flex;
    justify-content: space-between;

    .add {
      font-size: 20rem;

      button {
        padding: 6rem 12rem;
        border: none;
        cursor: pointer;
        border-radius: 4rem;
        font-size: 18rem;
        transition: background-color 0.3s;
        background-color: #409eff;
        color: white;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10rem;
    background-color: #fff;
    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.05);
    border-radius: 8rem;
    overflow: hidden;
  }

  th,
  td {
    padding: 6rem 15rem;
    font-size: 14rem;
    text-align: left;
    border: 1rem solid #e0e0e0;
  }

  .btntd {
    padding: 6rem 0;
  }

  th {
    background-color: @theme-color;
    color: #9c9c9c;
    font-weight: 600;
    font-size: 14rem;
  }

  tbody tr:nth-child(even) {
    background-color: #f7f7f7;
  }

  tbody tr:hover {
    background-color: #f1f1f1;
  }

  tbody {
    .btn {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;

      .del {
        background-color: #ff4d4f;
        color: white;
      }

      .one {
        // background-color: #16ceaf;
        color: rgb(0, 0, 0);
      }
    }
  }

  button {
    padding: 6rem 10rem;
    border: none;
    cursor: pointer;
    border-radius: 4rem;
    font-size: 12rem;
    transition: background-color 0.3s;
  }

  .edit-btn {
    background-color: @theme-color;
    color: #fff;
    margin-right: 8rem;

    &:hover {
      background-color: darken(@theme-color, 10%);
    }
  }

  .delete-btn {
    background-color: #ff4d4f;
    color: #fff;

    &:hover {
      background-color: darken(#ff4d4f, 10%);
    }
  }
}

.pagination {
  width: 96%;
  display: flex;
  padding: 0 20rem;
  justify-content: end;
}

.el-form--inline .el-form-item {
  width: 100%;
}

.el-button,
.el-button.is-round {
  margin: auto;
  padding: 0 26rem;
}

.el-form {
  padding-top: 15rem;
}

@import url(../../css/icon.css);
</style>
>>>>>>> 546e85cd30efd3c059165735c54200debd7c297e
